<template>
  <div>
    <div class="header-contact-num container">
      <div class="phone-num">
        <image class="phone-icon" src="/static/images/phone-active.png" />
        <div>咨询热线: {{base.zixundianhua}}</div>
      </div>
      <div class="go-phone" @click="phone">
        一键拨号
      </div>
    </div>
    <div class="space"></div>

    <div class="product-types container">
      <navigator v-for="(item,index) in navlist" class="product-content" :key="index" :url="'/pages/productcenter/main?id='+ item.id" >
        <div class="button" :class="type === item.id ? 'active' : ''">{{item.name}}</div>
      </navigator>
    </div>
    <div class="space"></div>

    <div class="product-list">
      <div class="product-item" v-for="(item,index) in jobList" :key="index">
        <navigator class="product-content" :url="'/pages/productinfo/main?id='+ item.id" >
          <image model="aspectFit" class="product-img" :src="item.thumb" />
          <div class="product-name">{{item.title}}</div>
        </navigator>
      </div>
    </div>

    <div class="get-more-product" @click="getList">
      <img class="get-more-icon" src="/static/images/more-icon.png" alt="">
      <div class="text">点击加载更多</div>
    </div>

    <Contact :isTab="true"> </Contact>
    <UserTabBar> </UserTabBar>
  </div>
</template>

<script>
  const wxapp = getApp()
  import Contact from '@/components/Contact.vue'
  import UserTabBar from '@/components/UserTabBar.vue'
  export default {
    data() {
      return{
        type : '1',
        product : [...Array(7)],
        base: {},
        jobList: [],
        page: 1,
        navlist: []
      }
    },

    components: {
      Contact,
      UserTabBar
    },
    methods:{
      phone(){
        wx.makePhoneCall({
          phoneNumber: this.base.zixundianhua //仅为示例，并非真实的电话号码
        });
      },
      changeType(type){
        this.type = type;
      },
      getList() {
        wx.showLoading({
          title: '加载中',
        })
        if(this.page == 1) {
          this.jobList = {}
        }
        let that = this
        let id = this.$root.$mp.query.id
        if(!id) id = 1
        wx.request({
          url: wxapp.globalData.ROOT_URL, //仅为示例，并非真实的接口地址
          data: {
             siteid: '5' ,
             service: 'App.Hong.Index',
             page: that.page,
             table: '5_news',
             ftable: '5_share_category',
             id: id
          },
          success: function(res) {
            wx.hideLoading()
            that.isLoading = false
            if(res.data.data.result.length == 0) {
              wx.showToast({
                title: '没有了',
                icon: 'none',
                duration: 2000
              })
            }else {
              let list = res.data.data.result
              console.log(list)
              if(that.page >1) {
                let jobList = that.jobList
                for(let i in list) {
                  jobList.push(list[i])
                }
                that.jobList = jobList
              }else {
                that.jobList = list
              }
              that.page += 1
            }

          }
        })
      },
      getCate() {
        wx.showLoading({
          title: '加载中',
        })
        let that = this
        wx.request({
          url: wxapp.globalData.ROOT_URL, //仅为示例，并非真实的接口地址
          data: {
             service: 'App.Hong.GetCategory',
             table: '5_share_category',
             pid: 1
          },
          header: {
              'content-type': 'application/json' // 默认值
          },
          success: function(res) {
            wx.hideLoading()
            that.navlist = res.data.data.result
          }
        })
      }
    },
    onLoad() {
      this.type = this.$root.$mp.query.id
      let that = this
      wx.getStorage({
        key: 'base',
        success: function(res) {
            that.base = res.data
        }
      })
      this.page = 1
      this.getList()
      this.getCate()
    }

  }
</script>


<style scoped>
  view,div{
    box-sizing: border-box;
  }
.product-center-component{
  padding: 0 10rpx;
}
.header-contact-num{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  line-height: 50rpx;
  height: 50rpx;
}
.header-contact-num .phone-num{
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 30rpx;
}
.header-contact-num .phone-icon{
  width: 30rpx;
  height: 30rpx;
  margin-right: 10rpx;
}
.header-contact-num  .go-phone{
  font-size: 30rpx;
  color: #0099D9;
}
  .space{
    width: 100%;
    height: 10rpx;
    background: #F2EDED;
  }
.product-types{
  display: flex;
  flex-direction: row;
  padding: 10rpx 10rpx;
}
  .product-types .button{
    font-size: 30rpx;
    line-height: 50rpx;
    height: 50rpx;
    padding: 0 25rpx;
    background: #363635;
    margin-right: 15rpx;
    border-radius: 15rpx;
    color: #fff;
  }
.product-types .active{
  background: #0081DA;
}

.product-list{
  display: flex;
  flex-wrap: wrap;
}
.product-list .product-item{
  flex-basis: 50%;
  padding: 5rpx;
  overflow: hidden;
}
.product-list .product-content{
  border: 3rpx solid #0081DA;
  border-radius: 10rpx;
  overflow:hidden;
}
.product-list .product-item .product-img{
  width: 363rpx;
  height: 200rpx;
}
.product-list .product-item .product-name{
  text-align: center;
  border-top: 3rpx solid #0081DA;
}
  .get-more-product{
    margin-top: 50rpx;
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  .get-more-product .get-more-icon{
    width: 40rpx;
    height: 40rpx;
  }
  .get-more-product .text{
    font-size: 25rpx;
    margin-top: 10rpx;
  }
</style>
